<template>
    <div class="shopmanage">
        <el-button type="primary" @click="isopen = true" v-auth="'freight:add'">新增运费模板</el-button>
        <!-- 表格列表 -->
        <div class="shoptable">
            <el-table :data="tableData" stripe style="width: 100%">
                <el-table-column fixed="left" label="模板名称" prop="name" min-width="140"></el-table-column>
                <el-table-column fixed="left" label="说明" prop="description" min-width="140"></el-table-column>
                <el-table-column fixed="left" label="创建时间" prop="createdAt" min-width="140"></el-table-column>
                <el-table-column fixed="right" label="操作" width="170">
                    <template v-slot="scope">
                        <el-button @click="edit(scope.row)" size="small" v-auth="'freight:edit'">编辑</el-button>
                        <el-button
                            v-if="scope.row.enable == 1"
                            size="small"
                            @click="operate(2, scope.row.id)"
                            v-auth="'freight:status'"
                            >停用</el-button
                        >
                        <el-button
                            v-if="scope.row.enable == 2"
                            size="small"
                            @click="operate(1, scope.row.id)"
                            v-auth="'freight:status'"
                            >启用</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 新增或编辑运费模板抽屉 -->
        <Carriage :open="isopen" @close="close" @submit="submit" :formData="formData.param" />
    </div>
</template>
<script setup>
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import storage from '@/commons/storage';
import request from '@/request';
import Carriage from './carriage.vue';
import ElemBox from '@/commons/element/message.js';
import { isNotEmpty } from '../../../../commons/utils';
const isopen = ref(false);
let formData = reactive({ param: {} });
const tableData = ref([]);
// 抽屉关闭
const close = () => {
    isopen.value = false;
    // 初始化数据
    formData.param = {
        shopId: '',
        name: '',
        description: '',
        goodsFreightFee: '',
        area: [
            {
                freightFee: '',
                freeFreightFee: '',
                blockSort: 1,
                areaInner: []
            }
        ]
    };
    formData.param.shopId = storage.get('ZW-SHOPID');
};
// 页面初始化数据
const getPageParam = () => {
    // 获取运费模板列表
    request('getfreightList', { shopId: storage.get('ZW-SHOPID'), page: 1, perPage: 100000 }).then(res => {
        tableData.value = res?.data?.list || [];
    });
};
getPageParam();
// 开启或者关闭模板
const operate = (index, id) => {
    ElemBox.ElMessageBoxPromise(`确定要${index == 1 ? '启用' : '停用'}该模板吗？`).then(res => {
        request('freightSwitch', { shopId: storage.get('ZW-SHOPID'), templateId: id, enable: index }).then(res => {
            ElMessage.success(`${index == 1 ? '启用' : '停用'}成功`);
            getPageParam();
        });
    });
};
const edit = row => {
    // 调获取模板的接口
    request('getfreightDetail', { shopId: storage.get('ZW-SHOPID'), templateId: row.id }).then(res => {
        res.data.goodsFreightFee = res.data.goodsFreightFee / 100; //分转元
        if (!Object.getOwnPropertyNames(res.data.area).length) {
            res.data.area = [
                {
                    freightFee: '',
                    freeFreightFee: '',
                    blockSort: 1,
                    areaInner: []
                }
            ];
        } else {
            const area = [];
            Object.getOwnPropertyNames(res.data.area).forEach(key => {
                const innerData = { freeFreightFee: '', freightFee: '', id: [], areaInner: [] };
                res.data.area[key].map((item, index) => {
                    const placeId = [];
                    if (index == 0) {
                        //分转元
                        innerData.freeFreightFee = item.freeFreightFee / 100;
                        innerData.freightFee = item.freightFee / 100;
                    }
                    innerData.id.push(item.id);
                    if (item.provinceId) {
                        placeId.push(item.provinceId);
                    }
                    if (item.cityId) {
                        placeId.push(item.cityId);
                    }

                    if (item.areaId) {
                        placeId.push(item.areaId);
                    }
                    innerData.areaInner.push(placeId);
                });
                area.push(innerData);
            });
            res.data.area = area;
            delete res.data.id;
        }
        formData.param = { ...res.data, templateId: row.id };
        isopen.value = true;
    });
};
const submit = () => {
    getPageParam();
};
</script>
<style lang="scss" scoped>
.shoptable {
    margin-top: 16px;
}
</style>
